<template>
  <div>
    <mivaHead />
    <elevator :value="elevatorData" />

    <div class="miva-wapper">
      <template v-for="(temp, index) in classify">
        <div :key="index" :ref="'floor_'+index" :title="temp.name" class="zone-wrap-module clearfix">
          <itemSrepadModule :title="temp.name">
            <template v-for="(audio, index) in audioList">
              <itemSpreadModule :key="index" :value="audio" class="item-spread-module" />
            </template>
          </itemSrepadModule>

          <itemRankingTimeIng :rankingData="[]" class="zone-rank" />
        </div>
      </template>
    </div>
    <!-- 页脚 -->
    <mivaFooter size="small" />
  </div>
</template>

<script>
import mivaHead from '@/components/header/index.vue';
import mivaFooter from '@/components/footer/index.vue';
import elevator from '@/components/elevatorModule/index.vue';
import itemSrepadModule from '@/components/newComersModule/index.vue';
import itemRankingTimeIng from '@/components/rankingTimeing/index.vue';
import itemSpreadModule from '@/components/spreadModule.vue';
import { audioListByNew, audioClassify } from '@/api/project';

export default {
    name: 'Home',
    components: {
        mivaHead,
        mivaFooter,
        elevator,
        itemSrepadModule,
        itemRankingTimeIng,
        itemSpreadModule,
    },
    data() {
        return {
            elevatorData: [],
            audioList: [],
            classify: [],
        };
    },
    async mounted() {
        await this.getAudioClassify();
        this.elevatorData = this.getElevatorData();
        audioListByNew().then(({ data }) => {
            this.audioList = data.archives;
        }).catch((err) => {
            console.log(err);
        });
    },
    methods: {
        async getAudioClassify() {
            const { data } = await audioClassify();
            this.classify = data;
        },
        getElevatorData() {
            function getElementTop(element) {
                let actualTop = element.offsetTop;
                let current = element.offsetParent;
                while (current !== null) {
                    actualTop += current.offsetTop;
                    current = current.offsetParent;
                }
                return actualTop;
            }
            return Object.values(this.$refs).map(([element]) => ({
                title: element.title,
                toScroll: getElementTop(element),
            }));
        },
    },
};
</script>

<style lang="less" scoped>
.miva-wapper {
  width: @baseWidth;
  margin: 0 auto;
  padding: 30px 0;
  box-sizing: initial;
}
.zone-wrap-module {
  display: flex;
  padding-top: 30px;
  .zone-rank {
    float: right;
    width: 260px;
    min-height: 360px;
  }
  .item-spread-module {
    float: left;
    margin: 0 20px 20px 0;
  }
}
</style>
